<template>

<van-nav-bar
            left-text="返回"
            left-arrow
            @click-left="onBack"
            title="分销佣金"
        />

    <div class="kickback_header">
        <div class="left">
            <div>可提现(元): <span>{{ num }}</span></div>
            <div>累计提现(元): <span>{{ Withdrawal }}</span></div>
        </div>
        <div class="right" @click="onclick">
            立即提现
        </div>
    </div>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <!-- 加载列表 -->
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <div class="kickback">
        <div class="item" v-for="item in list">
            <div class="left">
                <div class="img">
                    <img :src="item.product_name.thumbs_cdn" alt="">
                </div>
                <div class="content">
                    <div class="nickname">订单号：{{ item.product.code }}</div>
                    <div class="tel">商品名称：{{ item.product_name.name }}</div>
                </div>
            </div>
            <div class="right">
                <div class="status" >{{ item.status == 1 ? '已提现' : '未提现' }}</div>
                <div class="money">+{{ item.amount }}</div>
            </div>
        </div>
    </div>
    <!-- 返回顶部 -->
    <van-back-top />
</van-list>
        </van-pull-refresh>

    <Tabbar />
</template>

<script setup>
    const { proxy } = getCurrentInstance();
    const business = proxy.$business;

    const refreshing = ref(false); // 刷新状态
    const loading = ref(false); // 懒加载状态
    const finished = ref(false); // 是否加载完成状态
    const list = ref([]);
    const page = ref(1);
    const num = ref(0);
    const Withdrawal = ref(0);

    // 下拉刷新事件
const onRefresh = () => {
    refreshing.value = true;
    loading.value = true;
    finished.value = false;
    page.value = 1;
    list.value = [];

    setTimeout(onLoad, 1500);
};

const onLoad = async () => {
    if (refreshing.value) {
        refreshing.value = false;
    }

    let params = {

        parentid:business.value.id,
        page:page.value

    };

    let result = await proxy.$http.post({
        url: '/Business/commission',
        params
    })


    finished.value = false;
    loading.value = false;
    num.value = 0;
    Withdrawal.value = 0;
    if (result.code === 1) {
        let count = result.data.count ?? 0;
        list.value = list.value.concat(result.data.list);

        for(let i = 0;i < list.value.length;i++)
        {   
            num.value += Number(list.value[i]['amount'])
            if(list.value[i]['status'] == 1)
            {
                Withdrawal.value += Number(list.value[i]['amount'])
            }
        }

        if (list.value.length >= count) {
            finished.value = true;

            return false;
        }

        page.value += 1;
    } else {
        finished.value = true;
        proxy.$warning(result.msg);
    }
};


const onclick = async ()=>{
    let params ={
        parentid:business.value.id
    }

    let result = await proxy.$http.post({
        url:'/business/withdraw',
        params
    })

    onRefresh();
}

const onBack = () => proxy.$router.back();
</script>

<style scoped>
    @import url('/assets/css/SaleMoney.css');
</style>